<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>动画</title>
	<style>
		.coin {
			width: 100px;
			height: 100px;
			margin: 100px;
			background: palegoldenrod;
			border-radius: 50%;
			animation: rotate1 5s linear;
			animation-iteration-count: infinite;
		}
		.coin:hover{
			animation-play-state: revert;
		}
		@keyframes rotate1 {
			0%{
				transform: rotateY(0deg);
			}
			100%{
				transform: rotateY(360deg);
			}
		}
	</style>
</head>
<body>
<div class="coin">

</div>
</body>
</html>
